// console.log( dataIndex );// 首页的数据

// 渲染头部通告
var tmp1 = '';
dataIndex.notice.forEach(function (item){
    tmp1 += '<li>'+item+'</li>';
})
$('.notice .list').innerHTML = tmp1;

// 渲染头部导航
var tmp2 = '';
dataIndex.navs.forEach(function (item){
    tmp2 += '<li>'+
                '<a href="./list.html">'+
                    '<img src="'+item.icon+'" alt="">'+
                    '<h3>'+item.title+'</h3>'+
                '</a>'+
            '</li>';
})
$('.header_nav').innerHTML = tmp2;

// 渲染轮播图
var tmp3 = '';
var pages = '';
dataIndex.banner.forEach(function (item,index){
    tmp3 += '<div style="background-image:url('+item.imgurl+')"></div>';

    pages += '<li>'+(index+1)+'</li>';
})
$('.banner .imgs').innerHTML = tmp3;
$('.banner .pages').innerHTML = pages;

// 字符串可以使用单引号或双引号表示 'hello' "hello"
// ES6中的模板字符串：可以使用反引号表示 `hello`
// 1.模板字符串中可以随意换行
// `hello 
// world`
// 2.模板字符串可以使用${}插入变量
// var str = 'world';
// `hello ${str}` => 'hello world'

// 渲染新商品
var tmp4 = '';
dataIndex.Mavic.new.forEach(function (item){
    tmp4 += `<div class="box">
                <a href="./detail.html">
                    <img class="goods_img1" src="${item.imgbg1}" alt="">
                    <img class="goods_img2" src="${item.imgbg2}" alt="">
                    <img class="goods_img3" src="${item.imghover}" alt="">
                    <h1>${item.title}</h1>
                    <h5>${item.cnt}</h5>
                    <p>${item.description}</p>
                    <div>￥ ${item.price}</div>
                </a>
            </div>`;
})
$('.new_goods').innerHTML = tmp4;
$('.new_goods').lastElementChild.className = 'box no_mgr';

// 渲染商品列表
var tmp5 = '';
dataIndex.Mavic.list.forEach(function (item){
    tmp5 += `<a href="#" class="item">
                <img src="${item.imgbg}" alt="">
                <h3>${item.title}</h3>
                <p>￥ ${item.price}</p>
                <div class="hover">
                    <img src="${item.imghover}" alt="">
                    <p>${item.description}</p>
                </div>
            </a>`;
})
$('.list-wrap').innerHTML = tmp5;

// 头部通告轮播
var list = $('.notice .list');
// var lis = $('.notice .list li');// length = 5
// 复制list中的第一个li
var clone_node = list.firstElementChild.cloneNode(true);
// 向list末尾添加复制的li
list.appendChild(clone_node);

var timer = null;// 记录计时器id
var index = 0;// 当前显示通告的索引
var lis = $('.notice .list li');// length = 6
autoPlay();// 进入页面自动播放(每隔3秒播放一条)

// 自动播放
function autoPlay(){
    clearInterval(timer);
    timer = setInterval(function (){
        // console.log( lis.length );// 6
        // 每隔3秒播放下一条
        move();
    },3000)
}

// 播放下一条
function move(){
    var li_h = list.firstElementChild.clientHeight;// 一个li的高度
    index++;
    // 临界值判断
    if (index >= lis.length) {
        index = 1;// 最后一条的下一条是第二条
        list.style.top = 0;// 定位恢复初始状态
    }
    animate(list,'top',-index*li_h);
}

// 返回顶部
window.onscroll = function (){
    if (document.documentElement.scrollTop >= 800) {
        $('.totop').style.display = 'block';
    } else {
        $('.totop').style.display = 'none';
    }
}
$('.totop').onclick = function (){
    animate(document.documentElement,'scrollTop',0);
}

// 轮播图-透明度
// 1.所有图片叠在一起
// 2.上次显示的图片,要降低定位层级,透明度恢复为0.1
// 3.要显示的图片,先提高定位层级,然后再改变透明度(0.1运动到1)

// 获取元素
var divs = $('.banner .imgs div');
var lis = $('.pages li');
var prev = $('.prev');
var next = $('.next');

// 计时器id
var timer2 = null;
// 当前显示图片的索引
var showIndex = 0;
// 进入页面默认显示第一张图片
divs[0].style.zIndex = 20;
divs[0].style.opacity = 1;
lis[0].className = 'show';

// 启动自动播放
autoPlay2();

// 自动播放
function autoPlay2(){
    // 每隔3秒播放下一张图片
    clearInterval(timer2);
    timer2 = setInterval(function (){
        moveNext();// 播放下一张
    },3000);
}

// 播放下一张
function moveNext(){
    // 当前显示图片恢复初始样式
    divs[showIndex].style.zIndex = 10;
    divs[showIndex].style.opacity = 0.1;
    lis[showIndex].className = '';

    // 当前显示图片的索引自增
    showIndex++;
    // 临界值判断
    if (showIndex >= divs.length) {
        // 最后一张图片的下一张是第一张
        showIndex = 0;
    }

    // 下一张显示的图片提高层级和改变透明度
    lis[showIndex].className = 'show';
    divs[showIndex].style.zIndex = 20;
    animate(divs[showIndex],'opacity',1);
}

// 播放上一张
function movePrev(){
    // 当前显示图片恢复初始样式
    divs[showIndex].style.zIndex = 10;
    divs[showIndex].style.opacity = 0.1;
    lis[showIndex].className = '';

    // 当前显示图片的索引递减
    showIndex--;
    // 临界值判断
    if (showIndex < 0) {
        // 第一张图片的上一张是最后一张
        showIndex = divs.length-1;
    }

    // 下一张显示的图片提高层级和改变透明度
    lis[showIndex].className = 'show';
    divs[showIndex].style.zIndex = 20;
    animate(divs[showIndex],'opacity',1);
}

// 点击 播放下一张图片
next.onclick = function (){
    // 停止自动播放
    clearInterval(timer2);
    // 播放下一张图片
    moveNext();
    // 启动自动播放
    autoPlay2();
}

// 点击 播放上一张图片
prev.onclick = function (){
    // 停止自动播放
    clearInterval(timer2);
    // 播放上一张图片
    movePrev();
    // 启动自动播放
    autoPlay2();
}

// 点击页码切换图片
for (var i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].onclick = function (){
        // 停止自动播放
        clearInterval(timer2);

        // 当前显示图片恢复初始样式
        divs[showIndex].style.zIndex = 10;
        divs[showIndex].style.opacity = 0.1;
        lis[showIndex].className = '';

        // 确定当前点击选项的索引
        showIndex = this.index;
        
        // 下一张显示的图片提高层级和改变透明度
        lis[showIndex].className = 'show';
        divs[showIndex].style.zIndex = 20;
        animate(divs[showIndex],'opacity',1);

        // 启动自动播放
        autoPlay2();
    }
}
